/*
 * @Author: dagu
 * @Description: 图片比例换算器组件
 */

import React, { useState, useEffect } from 'react';

interface AspectRatioCalculatorProps {
  onClose?: () => void;
}

const AspectRatioCalculator: React.FC<AspectRatioCalculatorProps> = ({ onClose }) => {
  const [originalWidth, setOriginalWidth] = useState<string>('');
  const [originalHeight, setOriginalHeight] = useState<string>('');
  const [targetWidth, setTargetWidth] = useState<string>('');
  const [targetHeight, setTargetHeight] = useState<string>('');

  // 计算比例
  const calculateRatio = (value: string, isWidth: boolean, originalW: string, originalH: string) => {
    if (!value || !originalW || !originalH) return;

    const oWidth = parseFloat(originalW);
    const oHeight = parseFloat(originalH);
    const newValue = parseFloat(value);

    if (isWidth) {
      const ratio = newValue / oWidth;
      setTargetHeight((oHeight * ratio).toFixed(2));
      setTargetWidth(value);
    } else {
      const ratio = newValue / oHeight;
      setTargetWidth((oWidth * ratio).toFixed(2));
      setTargetHeight(value);
    }
  };

  // 重置所有输入
  const handleReset = () => {
    setOriginalWidth('');
    setOriginalHeight('');
    setTargetWidth('');
    setTargetHeight('');
  };

  return (
    <div className='fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50'>
      <div
        className='bg-white rounded-lg p-6 w-[400px] relative'
        onClick={e => e.stopPropagation()}
      >
        <h2 className='text-xl font-bold mb-4'>图片比例换算器</h2>

        {/* 原始尺寸 */}
        <div className='mb-4'>
          <h3 className='text-sm font-medium mb-2'>原始尺寸</h3>
          <div className='flex gap-2'>
            <div className='flex-1'>
              <input
                type='number'
                value={originalWidth}
                onChange={e => setOriginalWidth(e.target.value)}
                placeholder='宽度'
                className='w-full px-3 py-2 border rounded-md'
              />
            </div>
            <div className='flex items-center'>×</div>
            <div className='flex-1'>
              <input
                type='number'
                value={originalHeight}
                onChange={e => setOriginalHeight(e.target.value)}
                placeholder='高度'
                className='w-full px-3 py-2 border rounded-md'
              />
            </div>
          </div>
        </div>

        {/* 目标尺寸 */}
        <div className='mb-4'>
          <h3 className='text-sm font-medium mb-2'>目标尺寸（输入其中一个，自动计算另一个）</h3>
          <div className='flex gap-2'>
            <div className='flex-1'>
              <input
                type='number'
                value={targetWidth}
                onChange={e => calculateRatio(e.target.value, true, originalWidth, originalHeight)}
                placeholder='宽度'
                className='w-full px-3 py-2 border rounded-md'
              />
            </div>
            <div className='flex items-center'>×</div>
            <div className='flex-1'>
              <input
                type='number'
                value={targetHeight}
                onChange={e => calculateRatio(e.target.value, false, originalWidth, originalHeight)}
                placeholder='高度'
                className='w-full px-3 py-2 border rounded-md'
              />
            </div>
          </div>
        </div>

        {/* 按钮组 */}
        <div className='flex justify-end gap-2'>
          <button
            onClick={handleReset}
            className='px-4 py-2 text-gray-600 hover:text-gray-800'
          >
            重置
          </button>
          <button
            onClick={onClose}
            className='px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600'
          >
            关闭
          </button>
        </div>
      </div>
    </div>
  );
};

export default AspectRatioCalculator;
